﻿<UserControl
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
	mc:Ignorable="d"
	x:Class="Tutorial.SongScroller"
	x:Name="UserControl"
	d:DesignWidth="640" d:DesignHeight="480" xmlns:WpfHero="clr-namespace:WpfHero;assembly=WHEngine">
	<UserControl.Resources>
		<ItemsPanelTemplate x:Key="GemLinePanelTemplate">
			<StackPanel IsItemsHost="True" Orientation="Horizontal"/>
		</ItemsPanelTemplate>
	</UserControl.Resources>

	<UserControl.DataContext>
		<WpfHero:WHEngine>
			<WpfHero:WHEngine.Gemline3Gems>
				<WpfHero:GemModel EndAt="00:00:05" StartAt="00:00:04"/>
			</WpfHero:WHEngine.Gemline3Gems>
			<WpfHero:WHEngine.Gemline1Gems>
				<WpfHero:GemModel EndAt="00:00:01" StartAt="00:00:00.5000000"/>
				<WpfHero:GemModel EndAt="00:00:02.1000000" StartAt="00:00:02"/>
			</WpfHero:WHEngine.Gemline1Gems>
		</WpfHero:WHEngine>
	</UserControl.DataContext>

	<Grid x:Name="LayoutRoot">
		<ScrollViewer HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Disabled">
			<Grid x:Name="grid">
				<StackPanel Margin="{Binding Path=Margin, ElementName=path, Mode=Default}" x:Name="stackPanel">
					<ItemsControl Background="#FF5E2828" VerticalAlignment="Top" Height="48" ItemsSource="{Binding Path=Gemline1Gems, Mode=Default}" ItemsPanel="{DynamicResource GemLinePanelTemplate}"/>
					<ItemsControl Background="#FF5A5826" VerticalAlignment="Top" Height="48" ItemsSource="{Binding Path=Gemline2Gems, Mode=Default}" ItemsPanel="{DynamicResource GemLinePanelTemplate}"/>
					<ItemsControl Background="#FF295E26" VerticalAlignment="Top" Height="48" ItemsSource="{Binding Path=Gemline3Gems, Mode=Default}" ItemsPanel="{DynamicResource GemLinePanelTemplate}"/>
					<ItemsControl Background="#FF28605B" VerticalAlignment="Top" Height="48" ItemsSource="{Binding Path=Gemline4Gems, Mode=Default}" ItemsPanel="{DynamicResource GemLinePanelTemplate}"/>
					<ItemsControl Background="#FF32265E" VerticalAlignment="Top" Height="48" ItemsSource="{Binding Path=Gemline5Gems, Mode=Default}" ItemsPanel="{DynamicResource GemLinePanelTemplate}"/>
				</StackPanel>
				<Path HorizontalAlignment="Left" Margin="50,0,0,0" Width="5" Fill="#FFFFFFFF" Stretch="Fill" Stroke="#FFFF0000" Data="M88,305 L88,230" StrokeThickness="3" StrokeStartLineCap="Round" StrokeEndLineCap="Round" x:Name="path"/>
			</Grid>
		</ScrollViewer>
	</Grid>
</UserControl>